<template>
  <div>
    <van-nav-bar title="compressor.js示例" class="nav-bar" left-arrow @click-left="navToBack"/>
    <div class="content">
      <div class="block">
        <van-row>
          <van-uploader v-model="fileList" :after-read="afterRead" multiple />
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import common from '@/mixins/common'
import upload from '@/mixins/upload'
import Compressor from 'compressorjs'
export default {
  mixins: [common, upload],
  data () {
    return {
      fileList: [
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' }
      ]
    }
  },
  methods: {
    afterRead (obj) {
      // 自定义写上传
      console.log('压缩前图片', obj.file)
      const _this = this
      /* eslint-disable no-new */
      new Compressor(obj.file, {
        quality: 0.2,
        success (result) {
          const file = new window.File([result], result.name, { type: result.type })
          console.log('压缩后图片', file)
          _this.$axios.upload('/upload', file, { id: 1 }).then(res => {
            console.log('上传成功')
          })
        }
      })

      // 或者调用封装好的公共方法
      this.imageCompressUpload(obj, '/upload/image', { id: 1 })
    }
  }
}
</script>
